<script>
import { Search } from "@element-plus/icons-vue";
import { getQues, getQuesById } from "../api/class";
import { ElMessage } from 'element-plus'
export default {
    data() {
        return {
            //三种筛选模式
            type: 1,
            quesType: '',
            // 选择正确率范围
            min: 0,
            max: 100,
            // 出题数量
            num: 1,
            // 获取的题目列表
            quesList: [],
            // 选中的题目列表
            selectQList: [],
            // 分页后的题目列表
            currentQList: [],
            // 页码
            currentPage: 1,
            // 全选
            selectAll: false,
            // 日期选择
            date: '',
            // 题目id
            quesId: '',
        }
    },
    components: {
        Search,
    },
    computed: {

    },
    props: ['falg'],
    mounted() {
        
    },
    methods: {
        // 选题模式切换
        typechange(n) {
            this.type = n;
            // 清空上个选题模式下共有的变量
            this.quesType = '';
            this.min = 0;
            this.max = 100;
            this.num = 1000;
            this.quesList = [];
            this.selectQList = [];
            this.selectAll = false;
            if (n == 2) {
                getQues().then(res => {
                    this.quesList = res.data;
                    this.currentQList = res.data.slice(0, 4);
                })
            }
        },
        currentChange() {

        },
        getQuesBtn() {
            this.selectAll = false;
            this.selectQList = [];
            this.quesList = [];
            getQues({
                quesType: this.quesType,
                min: this.min || 0,
                max: this.max || 100,
                num: this.num
            }).then(res => {
                // console.log(res);
                if (res.code == '200') {
                    this.quesList = res.data;
                } else {
                    ElMessage(res.msg)
                }
            })
        },
        // 全选按钮
        selectAllBtn() {
            // this.selectAll = !this.selectAll;
            for (let item of this.quesList) {
                item.isSelect = this.selectAll;
            }
            this.selectQList = this.quesList.filter(item => {
                return item.isSelect
            })
        },
        // 单选
        selectBtn() {
            let num = 0;
            for (let item of this.quesList) {
                if (!item.isSelect) {
                    this.selectAll = false;
                } else {
                    num++;
                }
                if (num == this.quesList.length) {
                    this.selectAll = true;
                }
            }
            this.selectQList = this.quesList.filter(item => {
                return item.isSelect
            })
        },
        // 将选取的所有题目传到父组件内
        addAll() {
            this.$emit('addall', this.selectQList)
        },
        seacher() {
            console.log(1111);
            getQuesById({
                quesId: this.quesId
            }).then(res => {
                if (res.code == '200') {
                    this.quesList = res.data;
                } else {
                    ElMessage(res.msg)
                }
                console.log(res);
            })
        }
    }
}
</script>
<template>
    <div class="addQuesCom">
        <div class="header">
            <el-button @click="typechange(1)">智能出题</el-button>
            <el-button @click="typechange(2)">错题重练</el-button>
            <el-button @click="typechange(3)">手动搜题</el-button>
            <el-divider class="line" />
        </div>
        <div v-show="type == 1" class="ques1">
            <div>
                <span>选择科目</span>
                <el-select v-model="quesType" placeholder=" ">
                    <el-option value="离散分析" />
                    <el-option value="线性代数" />
                    <el-option value="微积分" />
                    <el-option value="高等数学" />
                    <el-option value="前端HTML5" />
                </el-select>
            </div>
            <div>
                <span>已选考点</span><span>{{ quesType }}</span>
            </div>
            <div>
                <span>正确率&emsp;</span>
                <el-input-number v-model="min" :min="0" :max="100" /> ———
                <el-input-number v-model="max" :min="0" :max="100" />
            </div>
            <div>
                <span>出题数量</span>
                <el-input-number v-model="num" :min="1" :max="120" />
            </div>
            <div>
                <el-button type="primary" @click="getQuesBtn">智能出题</el-button>
            </div>
            <hr style="margin:20px 0" />
            <div class="selectQues">
                <div class="quesListHeader">
                    <el-checkbox label="全选" v-model="selectAll" :checked="selectAll"
                        @change="selectAllBtn"></el-checkbox>
                    <el-button type="primary" @click="addAll">全部添加</el-button>
                    <p class="quesCount">已选择<span style="color:red">{{ selectQList.length }}道</span></p>
                </div>
                <ul class="quesList">
                    <li v-for="item in quesList" :key="item.quesId">
                        <div>
                            <el-checkbox v-model="item.isSelect" :checked="item.isSelect"
                                @change="selectBtn"></el-checkbox>
                            <span>{{ item.quesId }}</span>
                            <span>{{ item.quesFrom }}</span>
                            <span>正确率：{{ item.probability }}</span>
                            <br />
                            <span>{{ item.quesContent }}</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div v-show="type == 2">
            <el-date-picker v-model="date" type="date" />
            <div class="quesListHeader">
                <el-checkbox label="全选" v-model="selectAll" :checked="selectAll" @change="selectAllBtn"></el-checkbox>
                <el-button type="primary" @click="addAll">全部添加</el-button>
                <p class="quesCount">已选择<span style="color:red">{{ selectQList.length }}道</span></p>
            </div>
            <ul class="quesList">
                <li v-for="item in currentQList" :key="item.quesId">
                    <div>
                        <el-checkbox v-model="item.isSelect" :checked="item.isSelect" @change="selectBtn"></el-checkbox>
                        <span>{{ item.quesId }}</span>
                        <span>{{ item.quesFrom }}</span>
                        <span>正确率：{{ item.probability }}</span>
                        <br />
                        <span>{{ item.quesContent }}</span>
                    </div>
                </li>
            </ul>
            <el-pagination v-model:current-page="currentPage" layout="prev, pager, next, jumper"
                :total="quesList.length" @currentChange="currentChange" />
        </div>
        <div v-show="type == 3">
            <div>
                <el-input v-model="quesId" placeholder="搜索题号(6位id)" @blur="seacher">
                    <template #prefix>
                        <el-icon>
                            <Search />
                        </el-icon>
                    </template>
                </el-input>
                <el-button type="primary" @click="addAll">添加</el-button>
            </div>
            <div v-if="quesList.length">
                <el-checkbox v-model="quesList[0].isSelect" :checked="quesList[0].isSelect"
                    @change="selectBtn"></el-checkbox>
                <span>{{ quesList[0].quesId }}</span>
                <span>{{ quesList[0].quesFrom }}</span>
                <span>正确率：{{ quesList[0].probability }}</span>
                <p>{{ quesList[0].quesContent }}</p>
            </div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.quesList>li {
    list-style: none;
    border-bottom: 1px solid #ccc;
    height: 120px;
    margin: 10px 0;
}


.addQuesCom {
    width: 700px;
    padding: 10px;
    display: flex;
    flex-direction: column;

    .header {
        width: 100%;
        display: flex;
        height: 30px;
        align-items: center;
        margin-bottom: 10px;

        .line {
            position: relative;
            bottom: -15px;
        }
    }
}

.addQuesCom>div {
    width: 100%;
}

.addQuesCom>div span {
    margin-right: 30px;
}

.ques1 {
    height: 700px;
}

.ques1>div:not(.selectQues) {
    height: 30px;
    line-height: 40px;
    margin: 5px 0;
    box-sizing: border-box;
}

.selectQues {
    height: 600px;
    overflow-y: auto;
    box-sizing: border-box;

    .quesListHeader {
        height: 40px;

        .el-checkbox {
            float: left;
        }

        .quesCount {
            display: inline-block;
            position: relative;
            left: 400px;
            top: -15px;
        }

        .el-button {
            float: right;
        }
    }

    .quesList {
        overflow-y: auto;
    }
}
</style>